<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>跨页面登录验证系统</title>
    <style>
      * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      body {
        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
      }

      .container {
        max-width: 1200px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 30px;
      }

      .header {
        text-align: center;
        padding: 20px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 15px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      }

      .header h1 {
        color: #2c3e50;
        margin-bottom: 10px;
        font-size: 2.5rem;
      }

      .header p {
        color: #7f8c8d;
        font-size: 1.1rem;
      }

      .content {
        display: flex;
        gap: 30px;
        flex-wrap: wrap;
      }

      .page {
        flex: 1;
        min-width: 300px;
        background: white;
        border-radius: 15px;
        padding: 30px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
      }

      .page:hover {
        transform: translateY(-5px);
      }

      .page h2 {
        color: #3498db;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #f1f1f1;
      }

      .page-content {
        margin-top: 20px;
      }

      .login-form {
        display: flex;
        flex-direction: column;
        gap: 15px;
      }

      .form-group {
        display: flex;
        flex-direction: column;
        gap: 5px;
      }

      label {
        font-weight: 600;
        color: #2c3e50;
      }

      input {
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 1rem;
        transition: border-color 0.3s;
      }

      input:focus {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
      }

      button {
        background: #3498db;
        color: white;
        border: none;
        padding: 12px 20px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 600;
        transition: background 0.3s;
        margin-top: 10px;
      }

      button:hover {
        background: #2980b9;
      }

      .status {
        padding: 15px;
        border-radius: 8px;
        margin-top: 20px;
        text-align: center;
        font-weight: 600;
      }

      .status.logged-out {
        background: #ffeaa7;
        color: #d35400;
      }

      .status.logged-in {
        background: #55efc4;
        color: #27ae60;
      }

      .token-display {
        background: #f1f2f6;
        padding: 15px;
        border-radius: 8px;
        margin-top: 20px;
        font-family: monospace;
        word-break: break-all;
      }

      .url-display {
        background: #f1f2f6;
        padding: 15px;
        border-radius: 8px;
        margin-top: 20px;
        font-family: monospace;
        word-break: break-all;
        font-size: 0.9rem;
      }

      .instructions {
        background: rgba(255, 255, 255, 0.9);
        border-radius: 15px;
        padding: 20px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
      }

      .instructions h3 {
        color: #2c3e50;
        margin-bottom: 15px;
      }

      .instructions ol {
        padding-left: 20px;
        margin-bottom: 15px;
      }

      .instructions li {
        margin-bottom: 10px;
        line-height: 1.6;
      }

      .code {
        background: #2d3436;
        color: #dfe6e9;
        padding: 15px;
        border-radius: 8px;
        font-family: monospace;
        margin-top: 15px;
        overflow-x: auto;
      }

      .note {
        background: #ffeaa7;
        padding: 15px;
        border-radius: 8px;
        margin-top: 20px;
        font-size: 0.9rem;
      }

      /* 移动端全屏布局 */
      @media (max-width: 768px) {
        .image-section {
          display: none;
        }
        .form-section {
          width: 100%;
          padding: 20px;
        }
        input {
          font-size: 16px;
          padding: 14px;
        }
        button {
          padding: 16px;
          font-size: 1.1rem;
        }
      }

      /* 桌面端分栏布局 */
      @media (min-width: 769px) {
        .split-layout {
          display: flex;
          height: 100vh;
        }
        .image-section {
          flex: 1;
          position: relative;
          min-height: 400px;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        .image-section img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          min-width: 100%;
          min-height: 100%;
          background: linear-gradient(45deg, #2c3e50, #3498db);
        }
        
        @media (prefers-reduced-motion: no-preference) {
          .image-section img {
            transition: opacity 0.5s ease;
          }
        }

        .overlay-text {
          position: absolute;
          bottom: 40px;
          left: 30px;
          color: white;
          text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        .overlay-text h2 {
          font-size: 2.5rem;
          margin-bottom: 15px;
        }
        .form-section {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: 40px;
        }
      }
    </style>
  </head>

  <body>
    <div class="split-layout">
      <div class="image-section">
         <img src="/static/login-bg.jpg" alt="登录背景图">
         <div class="overlay-text">
           <h2>欢迎回来</h2>
           <p>安全可靠的跨平台登录系统</p>
         </div>
       </div>
      
      <div class="form-section">
        <div class="container">
          <div class="header">
            <h1>跨页面登录验证系统</h1>
            <p>演示A页面调用B页面登录并返回携带Token的实现</p>
          </div>
          <div class="content">
            <div class="page">
          <h2>A页面 - 主应用</h2>
          <div class="page-content">
            <p>此页面包含需要登录才能访问的内容。</p>

            <div class="status logged-out">当前状态：未登录</div>

            <button id="loginBtn">跳转登录</button>
        <button id="githubLoginBtn" style="margin-top: 10px; background: #24292e;">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="white" style="vertical-align: middle; margin-right: 8px;">
            <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
          </svg>
          使用GitHub账号登录
        </button>

            <div class="token-display">Token将显示在这里</div>

            <div class="url-display">URL参数将显示在这里</div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    // A页面跳转逻辑
    function navigateToLogin() {
      // 获取当前URL参数
      const params = new URLSearchParams(window.location.search);

      // 构建跳转URL
      const loginUrl = `login.html?${params.toString()}`;

      // 跳转到登录页面
      window.location.href = loginUrl;
    }

    // 解析URL参数
    function getUrlParams() {
      const params = new URLSearchParams(window.location.search);
      return Object.fromEntries(params.entries());
    }

    // 更新页面显示
    function updatePageDisplays() {
      const params = getUrlParams();

      // 更新A页面显示
      const aTokenDisplay = document.querySelector(
        ".page:first-child .token-display"
      );
      const aUrlDisplay = document.querySelector(
        ".page:first-child .url-display"
      );
      const aStatus = document.querySelector(".page:first-child .status");

      if (params.token) {
        aTokenDisplay.textContent = `Token: ${params.token}`;
        aStatus.textContent = "当前状态：已登录";
        aStatus.className = "status logged-in";
      } else {
        aTokenDisplay.textContent = "Token将显示在这里";
        aStatus.textContent = "当前状态：未登录";
        aStatus.className = "status logged-out";
      }

      aUrlDisplay.textContent = `URL参数: ${window.location.search || "无"}`;

      // 更新B页面显示
      const bStatus = document.querySelector(".page:nth-child(2) .status");
      const bUrlDisplay = document.querySelector(
        ".page:nth-child(2) .url-display"
      );

      if (params.token) {
        bStatus.textContent = "登录状态：已登录";
        bStatus.className = "status logged-in";
      } else {
        bStatus.textContent = "登录状态：未登录";
        bStatus.className = "status logged-out";
      }

      bUrlDisplay.textContent = `URL参数: ${window.location.search || "无"}`;
    }

    // A页面登录按钮事件
    document.getElementById("loginBtn").addEventListener("click", function () {
      // // 获取当前URL参数
      // const params = new URLSearchParams(window.location.search);

      // // 构建跳转URL - 在实际应用中这里应该跳转到b.html
      // // 这里为了演示，只是更新URL参数
      // params.set('redirect', 'true');
      // window.location.search = params.toString();
      navigateToLogin();
    });

    document.getElementById("githubLoginBtn").addEventListener("click", function() {
      window.location.href = "/test-gin/auth/github";
    });

    // 初始化页面显示
    updatePageDisplays();
    // 监听URL变化
    window.addEventListener("popstate", updatePageDisplays);
  </script>
</html>
